  <template>

  <div>
    <el-form ref="form"  label-width="80px" inline>
      <el-form-item label="顾客姓名">
        <el-input v-model="queryParam.customerName" placeholder="请输顾客姓名" ></el-input>
      </el-form-item>
      <el-form-item label="顾客年龄">
        <el-input v-model="queryParam.customerAge" placeholder="请输顾客年龄" ></el-input>
      </el-form-item>
      <el-form-item label="顾客性别">
        <el-input v-model="queryParam.customerSex" placeholder="请输顾客性别" ></el-input>
      </el-form-item>
      <el-form-item  >
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-button type="primary" @click="dialogFormVisible=true" >添加</el-button>

    <el-table :data="tableData" size="mini" style="width: 100%" v-loading="loading">
      <el-table-column align="center" type="index" label="序号" width="60">
      </el-table-column>
      <!--      <el-table-column prop="roomsId" label="房间id" align="center" width="180"></el-table-column>-->
      <el-table-column prop="customerName" label="顾客姓名" align="center"></el-table-column>
      <el-table-column prop="customerAge" label="顾客年龄" align="center"></el-table-column>
      <el-table-column prop="customerSex" label="顾客性别" align="center"></el-table-column>
      <el-table-column prop="height" label="身高" align="center"></el-table-column>
<!--      <el-table-column prop="foodlike" label="平时喜好" align="center"></el-table-column>-->
<!--      <el-table-column prop="foodattention" label="注意事项" align="center"></el-table-column>-->
<!--      <el-table-column prop="weight" label="体重" align="center"></el-table-column>-->
      <el-table-column prop="checkinDate" label="入住日期" align="center"></el-table-column>
      <el-table-column prop="expirationDate" label="合同到期时间" align="center"></el-table-column>

<!--      <el-table-column prop="birthday" label="出生日期" align="center"></el-table-column>-->

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button type="primary" size="mini" @click="toEdit(scope.row.customerId)">修改</el-button>
          <el-button type="warning" size="mini" @click="deleteById(scope.row.customerId)">删除</el-button>
        </template>

      </el-table-column>

    </el-table>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @size-change="queryList"
          @current-change="queryList"
          :current-page.sync="queryParam.current"
          :page-size.sync="queryParam.size"
          :page-sizes="[5,10,15,20,50]"
          layout="total,sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>


    <el-dialog title="添加客户" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="客户姓名">
          <el-input v-model="form.customerName" ></el-input>
        </el-form-item>
        <el-form-item label="客户年龄">
          <el-input v-model="form.customerAge"></el-input>
        </el-form-item>
        <el-form-item label="客户性别">
          <el-input v-model="form.customerSex"></el-input>
        </el-form-item>
        <el-form-item label="平时喜好">
          <el-input v-model="form.foodlike"></el-input>
        </el-form-item>
        <el-form-item label="注意事项">
          <el-input v-model="form.foodattention"></el-input>
        </el-form-item>
        <el-form-item label="入住日期">
          <el-date-picker
              v-model="form.checkinDate"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同到期时间">
          <el-date-picker
              v-model="form.expirationDate"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="form.height"></el-input>
        </el-form-item>
        <el-form-item label="体重">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
<!--        <el-form-item label="出生日期">-->
<!--          <el-date-picker-->
<!--              v-model="form.birthday"-->
<!--              type="date"-->
<!--              format="yyyy-MM-dd"-->
<!--              placeholder="选择入住日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->


        <el-form-item label="">
          <el-button type="primary" @click="save()">保存</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>


</template>

<script>


// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:8080";
import service from "@/utils/request.js";

export default {
  name: 'Dept',

  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      loading: false,
      form:{
        customerId:'',
        customerName:'',
        customerAge:'',
        customerSex:'',
        roomNumber:'',
        buildingId:'',
        elderType:'',
        foodlike:'',
        foodremarks:'',
        checkinDate:'',
        foodattention:'',
        expirationDate:'',
        attention:'',
        psychosomaticState:'',
        height:'',
        maritalStatus:'',
        weight:'',
        bloodType:'',
        idcard:'',
        contactTel:'',
        birthday:''
      },
      total:0,
      pages:0,
      queryParam:{
        current:1,
        size:5,
        customerName:'',
        customerAge:'',
        customerSex:''
      }
    }
  },
  methods: {
    search(){
      this.queryParam.current=1;
      this.queryList();
    },
    queryList() {
      this.loading = true;
      service.get("/customer/page",{params:this.queryParam}).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
        console.log("tableData:" ,this.tableData)
        console.log("total:" ,this.total)
        this.pages = res.pages;
        this.loading = false
      })
    },
    toEdit(id){
      service.get("/customer/getById/"+id).then((res) => {
        this.form = res;
        this.dialogFormVisible = true;
      })
    },
    deleteById(id){
      this.$confirm('是否删除', '确认信息') .then(() => {
        service.get("/customer/removeById/"+id).then((res) => {
          const success = res
          if(success){
            this.$message.success("删除成功");
            this.queryList();
          }
        })
      });
    },
    save(){
      service.post("/customer/saveOrUpdate",this.form  ).then((res) => {
        const success = res
        if(success){
          this.$message.success("保存成功");
          this.dialogFormVisible = false;
          this.queryList();
        }
      })
    }
  },
  created() {
    this.queryList()
  }

}
</script>

<style scoped>


</style>